<template>
  <div id="main" ref="main"></div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.barChart();
  },
  methods: {
    barChart() {
      const myChart = echarts.init(this.$refs.main);
      const option = {
        title: {
          text: "故障次数环比（单位：次）",
          left: "center"
        },
        legend: {
          data: ["06月", "07月"],
          icon: "circle",
          bottom: 0
        },
        xAxis: {
          type: "category",
          data: ["直通", "泰岳", "浩瀚深度"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "06月",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 16
                  }
                }
              }
            }
          },
          {
            name: "07月",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 16
                  }
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>